<template>
  <div class="i_bg">
    <div class="content mar_20">
      <ProductCollect ref="productCollect"></ProductCollect>

      <div class="l_list">
        <table
          border="0"
          style="width: 100%; margin-bottom: 30px; border: 1px solid #eaeaea"
          cellspacing="0"
          cellpadding="0"
        >
          <tr valign="top">
            <td width="248">
              <div class="brand_img">
                <img src="http://192.168.1.146:8088/brand5.jpg" width="226" height="108" />
              </div>
            </td>
          </tr>
        </table>
        <div class="list_t">
          <span class="fl list_or">
            <a href="#" class="now">默认</a>
            <a href="#">
              <span class="fl">销量</span>
              <span class="i_up">销量从低到高显示</span>
              <span class="i_down">销量从高到低显示</span>
            </a>
            <a href="#">
              <span class="fl">价格</span>
              <span class="i_up">价格从低到高显示</span>
              <span class="i_down">价格从高到低显示</span>
            </a>
            <a href="#">新品</a>
          </span>
          <span class="fr">共发现{{pageInfo.total}}件</span>
        </div>
        <div class="list_c">
          <ul class="cate_list">
            <li v-for="product in pageInfo.list" :key="product.id">
              <div class="img">
                <router-link  :to="{name:'productDetail', query:{id:product.id}}">
                  <img :src="`http://192.168.1.146:8088/${product.fileName}`" width="210" height="185"/>
                </router-link>
              </div>
              <div class="price">
                <font>￥<span>{{product.price}}</span></font> &nbsp; 26R
              </div>
              <div class="name"><router-link  :to="{name:'productDetail', query:{id:product.id}}">{{product.name}}</router-link></div>
              <div class="carbg">
                <a href="#" class="ss"  @click="addCollect(product.id)">收藏</a>
                <a href="#" class="j_car" @click="ShowDiv(product.id,product.stock)">加入购物车</a>
              </div>
            </li>
          </ul>
          <div v-if="isHide"><h1>暂时无数据</h1></div>
          <div class="pagination-area" v-if="!isHide">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.pageNum"
              :page-sizes="[5, 10]"
              :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ProductCollect from './ProductCollect.vue';

export default {
  components: {
    ProductCollect
  },
  name: "productOfCategory",
  data() {
    return {
      id: 0,
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        pages: 1,
        list: []
      },
      searchProductName: "",
      isHide: false,
      collectIds: {},
    };
  },
  methods: {
    searchInfo(pageNum, pageSize) {
      this.searchProductName = this.$route.query.searchProductName;
      this.id = this.$route.query.id;
      console.log('id:' + this.id);
      this.$axios({
        method: "get",
        url: "api/product/page",
        params: {
          searchCategoryId: this.id,
          searchProductName: this.searchProductName,
          pageNum,
          pageSize
        }
      }).then((rs) => {
        console.log("拿到的ProductList:" + rs);
        this.pageInfo = rs.data.pageInfo;
        if (this.pageInfo.list.length > 0) {
          this.isHide = false;
        } else {
          this.isHide = true;
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    handleSizeChange(newSize) {
      this.searchInfo(1, newSize);
    },
    handleCurrentChange(newPage) {
      this.searchInfo(newPage, this.pageInfo.pageSize);
    },
    addCollect(productId) {
      this.$refs.productCollect.addCollect(productId);
    },
    ShowDiv(productId, productStock) {
      let token = sessionStorage.getItem("token");
      if (token == null) {
        alert("请登录");
        return;
      }
      if (productStock < 1) {
        alert("库存不足");
        return;
      }
      this.$axios({
        method: "post",
        url: "api/order/addShoppingCar",
        data: {
          token,
          productId,
          quantity: 1
        }
      }).then((rs) => {
        alert(rs.data.result);
        this.$parent.getShoppingCar();
      }).catch((error) => {
        console.error(error);
      });
    },
  },
  watch: {
    "$route.query.id": function (newId, oldId) {
      console.log(`id 从 ${oldId} 变更为 ${newId}`);
      this.searchInfo(1, 5);
    },
    "$route.query.searchProductName": function (newId, oldId) {
      console.log(`id 从 ${oldId} 变更为 ${newId}`);
      this.searchInfo(1, 5);
    }
  },
  mounted() {
    this.searchInfo(1, 5);
  }
};
</script>

<style>
.pagination-area {
  margin-top: 50px;
  text-align: center;
}
</style>